<template>
  <el-row :gutter="10">  
  <!-- 标题栏 -->
    <el-col :span="8">
      <div
        style="
          background-color: #338fb6;
          color: #e6e0cf;
		  padding: 8px;
		  text-align: center;
		  font-weight: bolder;
		  font-size: 25px;
		  margin: 5px 0;
        "
      >
        <p>无人机图像</p>
      </div>
	  <!-- 图像显示区域 -->
      <div style="width: 100%; height: 240px; background-color: white; margin: 5px 0">
        <el-empty v-if="图片路径 == ''" :image-size="120" />
        <img
          v-else
          :src="'http://localhost:3000' + 图片路径.replace('public', '')"
          style="width: 100%; height: 100%"
        />
      </div>
      <!-- 图像信息展示行 -->
      <div style="width: 100%">
        <el-row :gutter="5" style="margin: 5px 0">
          <el-col :span="8"
            ><p
              style="
			    padding: 10px;
		  	    text-align: center;
                background-color: #68997c;
                color: #e6e0cf;
				font-size: 18px;
              "
            >
              图像名称
            </p></el-col>
          <el-col :span="16"
            ><p
              style="
			    padding: 10px;
			    text-align: center;
                background-color: #68997c5c;
                color: black;
				font-size: 18px;
              "
            >
              {{ 图像名称 }}
            </p></el-col>
        </el-row>
        <el-row :gutter="5" style="margin: 5px 0">
          <el-col :span="8"
            ><p
              style="
			    padding: 10px;
	  		    text-align: center;
                bbackground-color: #68997c;
                color: #e6e0cf;
				font-size: 18px;
              "
            >
              拍摄时间
            </p></el-col
          >
          <el-col :span="16"
            ><p
              style="
			    padding: 10px;
			    text-align: center;
                background-color: #68997c5c;
                color: black;
				font-size: 18px;
              "
            >
              {{ 拍摄时间 }}
            </p></el-col
          >
        </el-row>
        <el-row :gutter="5" style="margin: 5px 0">
          <el-col :span="8"
            ><p
              style="
			    padding: 10px;
			    text-align: center;
                background-color: #68997c;
                color: #e6e0cf;
				font-size: 18px;
              "
            >
              损坏类型
            </p></el-col
          >
          <el-col :span="16"
            ><p
              style="
			    padding: 10px;
			    text-align: center;
                background-color: #68997c5c;
                color: black;
				font-size: 18px;
              "
            >
              {{ 损坏类型 }}
            </p></el-col
          >
        </el-row>
        <el-row :gutter="5" style="margin: 5px 0">
          <el-col :span="8"
            ><p
              style="
			    padding: 10px;
			    text-align: center;
                background-color: #68997c;
                color: #e6e0cf;
				font-size: 18px;
              "
            >
              经度
            </p></el-col
          >
          <el-col :span="16"
            ><p
              style="
			    padding: 10px;
			    text-align: center;
                background-color: #68997c5c;
                color: black;
				font-size: 18px;
              "
            >
              {{ 经度 }}
            </p></el-col
          >
        </el-row>
        <el-row :gutter="5" style="margin: 5px 0">
          <el-col :span="8"
            ><p
              style="
			    padding: 10px;
			    text-align: center;
                background-color: #68997c;
                color: #e6e0cf;
				font-size: 18px;
              "
            >
              纬度
            </p></el-col>
          <el-col :span="16"
            ><p
              style="
			    padding: 10px;
			    text-align: center;
                background-color: #68997c5c;
                color: black;
				font-size: 18px;
              "
            >
              {{ 纬度 }}
            </p></el-col
          >
        </el-row>
      </div>
    </el-col>
    <el-col :span="16">
	  <!-- 标题栏 -->
      <div
        style="
		  padding: 10px;
		  text-align: center;
          background-color: #3b2b20;
          color: #e6e0cf;
		  font-size: 18px;
        "
      >
        <p>长沙市公共设施管理系统</p>
      </div>
	  <!-- 地图容器 -->
      <div style="width: 100%; height: 418px" id="map"></div><!-- 项目信息展示行 -->
      <div>
        <el-row :gutter="5">
          <el-col :span="6"
            ><p
              style="
			    padding: 10px;
			    text-align: center;
                background-color: #c44d39;
                color: #e6e0cf;
				font-size: 18px;
              "
			  >
              路线编号</p>
            <p
              style="
			    padding: 10px;
			    text-align: center;
                background-color: #c44d395c;
                color: black;
				font-size: 18px;
              "
            >
              {{ 路线编号 }}
            </p></el-col>

          <el-col :span="6"
            ><p
              style="
			    padding: 10px;
			    text-align: center;
                background-color: #c44d39;
                color: #e6e0cf;
				font-size: 18px;
              "
            >
              管养单位
            </p>
            <p
              style="
			    padding: 10px;
			    text-align: center;
                background-color: #c44d395c;
                color: black;
				font-size: 18px;
              "
            >
              {{ 管养单位 }}
            </p></el-col
          >
          <el-col :span="6"
            ><p
              style="
			    padding: 10px;
			    text-align: center;
                background-color: #c44d39;
                color: #e6e0cf;
				font-size: 18px;
				margin: 5px 0;
              "
            >
              是否处置
            </p>
            <p
              style="
                padding: 10px;
                text-align: center;
				background-color: #c44d395c;
                color: black;
				font-size: 18px;
              "
            >
              {{ 是否处置 }}
            </p></el-col
          >
          <el-col :span="6"
            ><p
              style="
			    padding: 10px;
			    text-align: center;
                background-color: #c44d39;
                color: #e6e0cf;
				font-size: 18px;
				margin: 5px 0;
              "
            >
              处理时间
            </p>
            <p
              style="
			    padding: 10px;
			    text-align: center;
                background-color: #c44d395c;
                color: black;
				font-size: 18px;
              "
            >
              {{ 处理时间 }}
            </p></el-col
          >
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>
<script setup>
import { onMounted, ref } from "vue";
import http from "../utils/http";
const 图像名称 = ref("");
const 拍摄时间 = ref("");
const 损坏类型 = ref("");
const 经度 = ref("");
const 纬度 = ref("");
const 图片路径 = ref("");
const 是否处置 = ref("");
const 处理时间 = ref("");
const 路线编号 = ref("");
const 管养单位 = ref("");

onMounted(() => {
  var TDT = new ol.layer.Tile({
    title: "天地图卫星影像",
    source: new ol.source.XYZ({
      url:
        "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=bcc62222fc634ec736589c483de933e6",
    }),
    visible: false,
  });
  const map = new ol.Map({
    target: "map",
    layers: [
      TDT,
      new ol.layer.Tile({
        title: "天地图地图",
        source: new ol.source.XYZ({
          url:
            "http://t{0-7}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=bcc62222fc634ec736589c483de933e6",
        }),
      }),
      new ol.layer.Tile({
        title: "天地图标注",
        source: new ol.source.XYZ({
          url:
            "http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=bcc62222fc634ec736589c483de933e6",
        }),
      }),
    ],
    view: new ol.View({
      //长沙
      center: ol.proj.fromLonLat([112.938814, 28.228209]),
      zoom: 12,
    }),
  });
  map.addControl(new ol.control.LayerPopup());

  //获取geojson数据
  http
    .get(
      "/roads/all"
      // + localStorage.getItem("ms_name")
    )
    .then((res) => {
      var roadSource, pointSource;
      var geojsonObject = res.data;
      var features = new ol.format.GeoJSON().readFeatures(geojsonObject, {
        //数据坐标系
        dataProjection: "EPSG:4326",
        //地图坐标系
        featureProjection: "EPSG:3857",
      });
      roadSource = new ol.source.Vector({
        features: features,
      });
      var vectorLayer = new ol.layer.Vector({
        title: "路网",
        source: roadSource,
      });
      map.addLayer(vectorLayer);
	  
      var extent = roadSource.getExtent();
      // map.getView().fit(extent, map.getSize());

      // 选择交互
      var selecti = new ol.interaction.Select({
        hitTolerance: 5,
        condition: ol.events.condition.singleClick,
      });
      map.addInteraction(selecti);

      // 选择控制
      var popup = new ol.Overlay.PopupFeature({
        popupClass: "default anim",
        select: selecti,
        canFix: true,
      });
      map.addOverlay(popup);
      selecti.on("select", function (e) {
        console.log(e);
        var f = e.selected[0];
        if (f) {
          图像名称.value = f.get("图像名称");
          拍摄时间.value = f.get("拍摄时间");
          损坏类型.value = f.get("损坏类型");
          经度.value = f.get("经度");
          纬度.value = f.get("纬度");
          图片路径.value = f.get("图片路径");
          是否处置.value = f.get("是否处置");
          处理时间.value = f.get("处理时间");
          路线编号.value = f.get("路线编号");
          管养单位.value = f.get("管养单位");
          var p = e.selected[0].getGeometry().getFirstCoordinate();
          popup.show(p, e.selected[0]);
          map.getView().animate({ center: p });
        }
      });

      if (localStorage.getItem("ms_name") == "all") {
        http.get("/project/all/geojson").then((res) => {
          var geojsonObject = res.data;
          var features = new ol.format.GeoJSON().readFeatures(geojsonObject, {
            //数据坐标系
            dataProjection: "EPSG:4326",
            //地图坐标系
            featureProjection: "EPSG:3857",
          });
          pointSource = new ol.source.Vector({
            features: features,
          });
          var vectorLayer = new ol.layer.Vector({
            title: "项目",
            source: pointSource,
            //已处置和未处置可以分别显示吗，最好能显示成圆形和五角星之类的。
            style: (feature) => {
              if (feature.get("是否处置") == "已处置") {
                return new ol.style.Style({
                  image: new ol.style.Circle({
                    radius: 8,
                    fill: new ol.style.Fill({
                      color: "rgba(128, 0, 32, 0.5)",
                    }),
                    stroke: new ol.style.Stroke({
                      color: "red",
                      width: 1,
                    }),
                  }),
                });
              } else {
                return new ol.style.Style({
                  image: new ol.style.RegularShape({
                    fill: new ol.style.Fill({
                      color: "rgba(128, 0, 32, 0.5)",
                    }),
                    stroke: new ol.style.Stroke({
                      color: "deepred",
                      width: 1,
                    }),
                    points: 5,
                    radius: 10,
                    radius2: 4,
                    angle: 0,
                  }),
                });
              }
            },
          });
          map.addLayer(vectorLayer); // Set the control grid reference
        });
      } else {
        http
          .get("/project/list/unit/geojson/" + localStorage.getItem("ms_name"))
          .then((res) => {
            var geojsonObject = res.data;
            var features = new ol.format.GeoJSON().readFeatures(geojsonObject, {
              //数据坐标系
              dataProjection: "EPSG:4326",
              //地图坐标系
              featureProjection: "EPSG:3857",
            });
            pointSource = new ol.source.Vector({
              features: features,
            });
            var vectorLayer = new ol.layer.Vector({
              title: "项目",
              source: pointSource,
              style: (feature) => {
                if (feature.get("是否处置") == "已处置") {
                  return new ol.style.Style({
                    image: new ol.style.Circle({
                      radius: 8,
                      fill: new ol.style.Fill({
                        color: "rgba(128, 0, 32, 0.5)",
                      }),
                      stroke: new ol.style.Stroke({
                        color: "deepred",
                        width: 1,
                      }),
                    }),
                  });
                } else {
                  return new ol.style.Style({
                    image: new ol.style.RegularShape({
                      fill: new ol.style.Fill({
                        color: "rgba(128, 0, 32, 0.5)",
                      }),
                      stroke: new ol.style.Stroke({
                        color: "deepred",
                        width: 1,
                      }),
                      points: 5,
                      radius: 10,
                      radius2: 4,
                      angle: 0,
                    }),
                  });
                }
              },
            });
            map.addLayer(vectorLayer);
          });
      }
    });
});
</script>
